<template>
  <view>
    <tm-images class="bg-set" src="static/loginbg.jpg" :previmage="false"></tm-images>
    <view style="text-align: center">
      <view :style="{ height: '160rpx' }"></view>
      <tm-avatar :size="160" :round="24" src="/static/logo.png"/>
<!--      <tm-images :width="200" src="static/logo.png" lazy-load></tm-images>-->
<!--      <tm-skeleton :model='item'></tm-skeleton>-->
      <view class="welcome">
        用户登录
      </view>
      <view class="welcome_info">
        欢迎您登录本系统
      </view>
      <tm-gap></tm-gap>
      <view style="padding: 20px">
        <mpwxLogin v-if="selectedLogin===0" :isAgreement="isAgreement"></mpwxLogin>
        <phoneLogin v-if="selectedLogin===1" :isAgreement="isAgreement"></phoneLogin>
        <pwdLogin v-if="selectedLogin===2" :isAgreement="isAgreement"></pwdLogin>
      </view>

      <tm-sticky model="bottom" :top="20" width="90%">
        <view style="width: 100%;margin: auto;">
          <tm-groupcheckbox name="agreement">
            <tm-checkbox v-model="agreement" model="round" round="rounded" dense>
            </tm-checkbox>
            <text class="text-size-m">我已阅读并同意</text>
            <text class="text-size-m text-blue" :class="'text-' + $tm.vx.state().tmVuetify.color"
                  @click="clickTermsService">
              《用户服务协议》
            </text>
            <text class="text-size-m">和</text>
            <text class="text-size-m text-blue" :class="'text-' + $tm.vx.state().tmVuetify.color"
                  @click="clickPrivacy">
              《隐私政策》
            </text>
          </tm-groupcheckbox>
        </view>
        <tm-gap></tm-gap>
        <tm-gap></tm-gap>
        <view style="width: 80%;margin: auto;">
          <tm-divider class="text-size-m" text="其他登录方式"></tm-divider>
        </view>
        <tm-gap></tm-gap>
        <view class="flex-between" style="width: 80%;margin: auto;">
          <tm-button fab icon="icon-weixin" icon-size="45"
                     :theme="selectedLogin===0?'bg-gradient-green-accent':'bg-gradient-indigo-accent'" size="m"
                     @click="selectedLogin=0">g
          </tm-button>
          <tm-button fab icon="icon-mobile-alt" icon-size="45"
                     :theme="selectedLogin===1?'bg-gradient-green-accent':'bg-gradient-indigo-accent'" size="m"
                     @click="selectedLogin=1">g
          </tm-button>
          <tm-button fab icon="icon-lock-fill" icon-size="45"
                     :theme="selectedLogin===2?'bg-gradient-green-accent':'bg-gradient-indigo-accent'" size="m"
                     @click="selectedLogin=2">g
          </tm-button>
        </view>
      </tm-sticky>
    </view>
  </view>
</template>

<script>
import mpwxLogin from './components/mpwxLogin.vue'
import phoneLogin from './components/phoneLogin.vue'
import pwdLogin from './components/pwdLogin.vue'
import TmCol from "../../tm-vuetify/components/tm-col/tm-col";

export default {
  components: {
    TmCol,
    mpwxLogin,
    phoneLogin,
    pwdLogin
  },
  data() {
    return {
      agreement: false,
      selectedLogin: 2,
      sysinfo: uni.getSystemInfoSync(),
      background: `${this.$IMG_URL}/dvadmin/img/loginbg-white.jpg`
    }
  },
  computed: {
    isAgreement() {
      return this.agreement
    }
  },
  methods: {
    // 隐私政策
    clickPrivacy() {
      uni.navigateTo({
        url: '/subPackages/clause/privacy'
      })
    },
    // 服务使用协议
    clickTermsService() {
      uni.navigateTo({
        url: '/subPackages/clause/termsService'
      })
    }
  }
}
</script>

<style>
.bg-set {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.welcome {
  text-align: center;
  position: relative;
  border: 0px solid #000000;
  font-size: 23px;
  font-weight: 700;
  font-family: "sans-serif";
  white-space: pre-line;
  color: rgb(32, 32, 34);
  box-sizing: border-box;
}

.welcome_info {
  text-align: center;
  color: rgb(158, 158, 158);
  font-size: 15px;
  font-family: "sans-serif";
}
</style>
